//引入normalize
@import "normalize.scss";
//引入base
@import "base.scss";
body{
  height: 100%;
  background:url('../images/zhujiemian/组50_22.png');
  // background-size: 100%;
  // background-size:cover;
  background-size:(1080/54)*1rem 43.555556rem;
}
.app {
  width: 100%;
  position: relative;
  .top {
    width: 100%;
    height: (329/54)*1rem;
    background: url("../images/ranking/圆角矩形2_96.png") no-repeat center / 100% 100%;
    margin: 0 auto;
    position: relative;
    color: white;
    font-size: (52/54)*1rem;;
    .pai{
      width: 50%;
      text-align: center;
      position: absolute;
      top:(66/54)*1rem;
    }
    .friend{
      left: 0;
    }
    .world{
      right: 0;
    }
    .line{
      background-color: white;
      width: (5/54)*1rem;
      height: (90/54)*1rem;
      border-radius: (5/54)*1rem;
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      top:(49/54)*1rem;
    }
    .le{
      background-color: white;
      width: (231/54)*1rem;
      height: (8/54)*1rem;
      border-radius: (231/54)*1rem;
      position: absolute;
      left:50%;
      transform: translateX(-50%);
      top: (66/54)*1rem;
    }
  }
  .list{
    height: ((1480+52)/54)*1rem;
    //border: 1px solid red;
    width: (942/54)*1rem;
    //margin: 0 auto;
    overflow: hidden;
    overflow-y: auto;
    position: absolute;
    top:(175/54)*1rem;
    left: 50%;
    transform: translateX(-50%);
    .list1{
      width: 100%;
      height: (257/54)*1rem;
      background: url("../images/ranking/组47.png") no-repeat center / 100% 100%;
      color: #514666;
      margin-bottom: (21/54)*1rem;
      position: relative;
      .name{
        font-size: (39/54)*1rem;
        font-weight: bold;
        top: (75/54)*1rem;
        left: (306/54)*1rem;
        position: absolute;
      }
      .head {
        width: (174/54)*1rem;
        height: (174/54)*1rem;
        position: absolute;
        top: (52/54)*1rem;
        left: (84/54)*1rem;
        background-color: skyblue;
        border-radius: 50%;
        border: (10/54)*1rem solid white;
      }
      .decorate{
        width: (154/54)*1rem;
        height: (154/54)*1rem;
        position: absolute;
        background: url("../images/ranking/形状2.png") no-repeat center / 100% 100%;
        top: 0;
        left: 0;
      }
      .mingci{
        color: white;
        position: absolute;
        left: (30/54)*1rem;
        top: (27/54)*1rem;
      }
      .designation {
        font-size: (39/54)*1rem;
        font-weight: bold;
        top: (154/54)*1rem;
        left: (306/54)*1rem;
        position: absolute;
      }
      .level{
        font-size: (28/54)*1rem;
        font-weight: bold;
        top: (163/54)*1rem;
        left: (498/54)*1rem;
        position: absolute;
      }
      .star{
        width: (50/54)*1rem;
        height: (49/54)*1rem;
        position: absolute;
        top: (184/54)*1rem;
        right: (178/54)*1rem;
        background: url("../images/ranking/组2_46.png") no-repeat center / 100% 100%;
      }
      .star_num{
        position: absolute;
        top: (192/54)*1rem;
        left: (774/54)*1rem;
        color: white;
        font-size: (38/54)*1rem;
      }
    }
  }
  .bottom{
    width: 100%;
    height: (146/54)*1rem;
    background: url("../images/ranking/组48.png") no-repeat center / 100% 100%;
    position: absolute;
    top: ((1480+175)/54)*1rem;
  }
}